<template>
  <Popup
    ref="popRef"
    :title="props.type === 'view' ? '班级详情' : '添加/编辑班级'"
    width="500px"
    async
    @confirm="submit"
    @close="$emit('close')"
    :confirmLoading="loading"
    :showFooter="props.type !== 'view'"
  >
    <div>
      <el-form
        label-width="90px"
        :model="formData"
        ref="formRef"
        :rules="rules"
        @submit.prevent
        :class="props.type === 'view' ? 'readonly_form' : ''"
      >
        <custom-title title="基础信息" style="margin-bottom: 20px" />

        <el-form-item label="id" prop="id" style="display: none">
          <el-input v-model="formData.id" />
        </el-form-item>

        <el-form-item
          v-if="props.type !== 'view'"
          prop="college_id"
          label="关联院校"
        >
          <el-select
            :disabled="props.type === 'view'"
            style="width: 100%"
            v-model="formData.college_id"
            placeholder="请选择关联院校"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item
          label="班级名称"
          prop="name"
          :hide-required-asterisk="props.type === 'view'"
        >
          <el-input
            :readonly="props.type === 'view'"
            placeholder="请输入班级名称"
            v-model="formData.name"
          />
        </el-form-item>
        <el-form-item label="班级描述" prop="describe">
          <el-input
            :readonly="props.type === 'view'"
            placeholder="请输入班级描述"
            v-model="formData.describe"
          />
        </el-form-item>

        <div v-if="props.type === 'view'">
          <custom-title title="关联信息" style="margin-bottom: 20px" />

          <el-form-item label="已关联院系" prop="tag">
            <el-space wrap>
              <el-tag size="large" effect="plain" type="primary">{{
                formData?.college?.name
              }}</el-tag>
            </el-space>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </Popup>
</template>

<script setup lang="ts">
import { addClass, editClass, getDepartmentList } from "@/api/consumer";
import feedback from "@/utils/feedback";
import type { FormInstance, FormRules } from "element-plus";
import customTitle from "@/components/custom-title/index.vue";
import { useRequest } from "vue-hooks-plus";

interface IFormData {
  name: string;
  describe: string;
  id?: string;
  college_id?: string;
  college?: any;
}

interface Props {
  type?: string;
}
const props = defineProps<Props>();

const emit = defineEmits(["close", "confirm"]);

//弹框ref
const popRef = shallowRef();
//表单ref
const formRef = shallowRef<FormInstance>();

//表单数据
const formData: IFormData = reactive({
  describe: "",
  name: "",
  id: "",
  college_id: "",
  college: {},
});

console.log("formDataformDataformData", formData);

const rules = reactive<FormRules<IFormData>>({
  name: [
    {
      required: true,
      message: "请填写班级名称",
      trigger: "change",
    },
  ],
  college_id: [
    {
      required: true,
      message: "请选择关联院校",
      trigger: "change",
    },
  ],
});

// 新增
const { loading, runAsync } = useRequest(
  async () => {
    if (formData.id) {
      return await editClass({ ...formData, id: formData.id });
    }
    return await addClass({ ...formData, id: undefined });
  },
  {
    manual: true,
  }
);

//提交表单
const submit = async () => {
  await formRef.value?.validate();
  await runAsync();

  if (formData.id) {
    feedback.msgSuccess("编辑成功！");
  } else {
    feedback.msgSuccess("新增成功！");
  }

  //   触发父元素的方法
  emit("confirm");
  popRef.value.close();
};

//打开弹框
const open = () => {
  popRef.value.open();
};

const setFormData = async (row: any) => {
  for (const key in formData) {
    if (row[key] != null && row[key] != undefined) {
      //@ts-ignore
      formData[key] = row[key];
    }
  }
};

// 获取学院列表配置
const { data: options } = useRequest(async () => {
  const _res = await getDepartmentList({ page: 1, limit: 9999 });

  return _res?.data?.map((item: any) => {
    return {
      label: item.name,
      value: item.id,
    };
  });
});

defineExpose({ open, setFormData });
</script>

<style scoped lang="scss">
.readonly_form {
  :deep(.el-input__wrapper) {
    box-shadow: none;
  }
}
</style>
